<template>
<!--  综合报表页面-->
  <div class="app-container">
    <el-row style="width: 100%;height: 100%;margin: 0;" :gutter="10">
      <!--区域数据-->
      <el-col :span="4" style="height: 100%;padding-left: 0;">
        <div style="background-color: #FFFFFF;height: 100%;padding: 10px;">
          <el-input placeholder="输入关键字进行过滤" clearable size="mini" suffix-icon="el-icon-search"
                    style="width: 100%;" v-model="filterText"/>
          <div style="max-height:96%;min-height: 96%;overflow-y: auto;margin-top: 10px;" class="treeCont">
            <el-tree
              :default-expanded-keys="defaultExpandedKeys"
              :data="sheetsTreeList"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="sheetsCode"
              highlight-current
              v-loading="treeLoading"
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data}">
                <div class="custom-tree-node"
                     style="display: flex;justify-content: center;align-items: center;font-size: 14px;">
                  <span class="iconfont icon-a-jiafangzijianzhu icon-padding" v-if="data.deviceType === 0"></span>
                  <span class="iconfont icon-loudong icon-padding" v-if="data.deviceType === 1"></span>
                  <span class="iconfont icon-a-homezhuyefangzijia icon-padding" v-if="data.deviceType === 2"></span>
                  <span class="iconfont icon-dabiao icon-padding" v-if="data.deviceType !== 0 && data.deviceType !== 1 && data.deviceType !== 2"></span>
                  <span>{{ node.label }}</span>
                  <span v-if="data.deviceCount!=null" class="device-count">({{data.deviceCount}})</span>
                </div>
              </template>
            </el-tree>
          </div>
        </div>
      </el-col>

      <!--大用户历史数据-->
      <el-col :span="20" style="height: 100%;background-color: #FFFFFF;">
        <div style="width: 100%;margin: 10px 5px 10px 0;">
          <el-row v-show="showSearch" class="line-bottom">
            <el-col class="form_col">
              <el-form :model="queryParams" ref="queryForm" size="mini" :label-width="labelWidth">
                <div id="searchFilter" style="display: flex; justify-content: start; flex-wrap: wrap;">
                  <el-form-item label="报表类型">
                    <el-radio-group v-model="tableName" @change="changeSelect">
                      <el-radio-button label="dayTable">日</el-radio-button>
                      <el-radio-button label="monthTable">月</el-radio-button>
                      <el-radio-button label="yearTable">年</el-radio-button>
                    </el-radio-group>
                    <!--                    <el-tooltip class="item" effect="dark" content="日报表" placement="top">-->
                    <!--                      <el-button :class="{ showFocus: tableName === 'dayTable' }" type="primary" @click="changeSelect('dayTable')" size="mini">日</el-button>-->
                    <!--                    </el-tooltip>-->
                    <!--                    <el-tooltip class="item" effect="dark" content="月报表" placement="top">-->
                    <!--                      <el-button :class="{ showFocus: tableName === 'monthTable' }" type="primary" @click="changeSelect('monthTable')" size="mini">月</el-button>-->
                    <!--                    </el-tooltip>-->
                    <!--                    <el-tooltip class="item" effect="dark" content="年报表" placement="top">-->
                    <!--                      <el-button :class="{ showFocus: tableName === 'yearTable' }" type="primary" @click="changeSelect('yearTable')" size="mini">年</el-button>-->
                    <!--                    </el-tooltip>-->
                  </el-form-item>
                  <el-form-item label="设备名称" prop="terminalName">
                    <el-input
                      v-model="queryParams.terminalName"
                      placeholder="请输入设备名称"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="时间" prop="getTimeN" v-if="tableName === 'dayTable'">
<!--                    日选择器-->
                    <el-date-picker
                      value-format="yyyy-MM-dd"
                      v-model="queryParams.getTimeN"
                      type="date"
                      placeholder="选择日期"
                      style="width: 100%">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="时间" prop="freezeTime" v-if="tableName === 'monthTable'">
                    <!--                    月选择器-->
                    <el-date-picker
                      value-format="yyyy-MM"
                      v-model="queryParams.freezeTime"
                      type="month"
                      placeholder="选择日期"
                      style="width: 100%">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="时间" prop="freezeTime" v-if="tableName === 'yearTable'">
                    <el-date-picker
                      value-format="yyyy"
                      v-model="queryParams.freezeTime"
                      type="year"
                      placeholder="选择日期"
                      style="width: 100%">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="IMEI" prop="imei">
                    <el-input
                      v-model="queryParams.imei"
                      placeholder="请输入imei"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="通讯地址" prop="communicateAddress">
                    <el-input
                      v-model="queryParams.communicateAddress"
                      placeholder="请输入通讯地址"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="出厂编号" prop="firstSupplierId">
                    <el-input
                      v-model="queryParams.firstSupplierId"
                      placeholder="请输入出厂编号"
                      clearable
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item></el-form-item>
                </div>
              </el-form>
            </el-col>
            <el-col class="form_query">
              <el-button v-show="collapseAble" type="text" @click="shiftCollapseAble" class="text" size="mini">
                <span>
                  {{ fold ? '收起筛选' : '更多筛选' }}
                </span>
              </el-button>
              <el-button type="primary" @click="handleQuery" size="mini">查询</el-button>
              <el-button @click="resetQuery" size="mini">重置</el-button>
              <RightDropdown :showSearch.sync="showSearch" @export="handleExport" :tableVisible="false" :queryVisible="false" class="ml10"></RightDropdown>
            </el-col>
          </el-row>

<!--          <el-row :gutter="10" class="mb8">-->
<!--            -->
<!--          </el-row>-->
          <!-- 第一张表 -->
          <transition
            enter-active-class="animated fadeInUp tableIn"
            leave-active-class="animated fadeOutUp tableOut">
            <div v-show="tableName === 'dayTable'">
              <el-table v-loading="tableLoading1" border :data="data_one"  highlight-current-row :height="getAvailableHeight" ref="dayTable">
                <el-table-column label="设备名称" align="center" prop="terminalName" :show-overflow-tooltip="true" fixed="left" width="120"/>
                <el-table-column label="用户编号" align="center" prop="userId" :show-overflow-tooltip="true" fixed="left" width="130"/>
                <el-table-column label="出厂编号" align="center" prop="firstSupplierId" :show-overflow-tooltip="true" fixed="left" width="120"/>
                <el-table-column label="通讯地址" align="center" prop="communicateAddress" :show-overflow-tooltip="true" fixed="left"  width="120"/>
                <el-table-column label="IMEI" align="center" prop="imei" :show-overflow-tooltip="true" width="120"></el-table-column>
                <el-table-column label="流量情况" align="center" prop="flowState">
                  <el-table-column label="最小夜间流量(m³/h)" align="center" prop="minNightFlow" :show-overflow-tooltip="true" width="140"></el-table-column>
                  <el-table-column label="昨日最小夜间流量(m³/h)" align="center" prop="minNightFlowO" :show-overflow-tooltip="true" width="170"></el-table-column>
                  <el-table-column label="平均值(m³/h)" align="center" prop="averageFlow" :show-overflow-tooltip="true" width="110"></el-table-column>
                </el-table-column>
                <el-table-column label="今日用量情况" align="center" prop="todayDosage" :show-overflow-tooltip="true">
                  <el-table-column label="正向用量(m³)" align="center" prop="readDosageN" :show-overflow-tooltip="true" width="120"></el-table-column>
                  <el-table-column label="反向用量(m³)" align="center" prop="reverseDosageN" :show-overflow-tooltip="true" width="120"></el-table-column>
                  <el-table-column label="净用量(m³)" align="center" prop="dosageN" :show-overflow-tooltip="true" width="110"></el-table-column>
                  <el-table-column label="起始读数" align="center" prop="totalFlowO" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column label="结束读数" align="center" prop="totalFlowN" :show-overflow-tooltip="true"></el-table-column>
                </el-table-column>
                <el-table-column label="昨日用量情况" align="center" prop="yesterdayDosage" :show-overflow-tooltip="true">
                  <el-table-column label="昨日正向用量(m³)" align="center" prop="readDosageO" :show-overflow-tooltip="true" width="140"></el-table-column>
                  <el-table-column label="昨日反向用量(m³)" align="center" prop="reverseDosageO" :show-overflow-tooltip="true" width="140"></el-table-column>
                  <el-table-column label="昨日净用量(m³)" align="center" prop="dosageO" :show-overflow-tooltip="true" width="140"></el-table-column>
                </el-table-column>
                <el-table-column label="压力情况" align="center" prop="stressStatus" :show-overflow-tooltip="true">
                  <el-table-column label="最小压力(MPa)" align="center" prop="minPressN" :show-overflow-tooltip="true" width="130"></el-table-column>
                  <el-table-column label="昨日最小压力(MPa)" align="center" prop="minPressO" :show-overflow-tooltip="true" width="150"></el-table-column>
                  <el-table-column label="环比(最小压力)(%)" align="center" prop="minPressSequential" :show-overflow-tooltip="true" width="150"></el-table-column>
                  <el-table-column label="最大压力(MPa)" align="center" prop="maxPressN" :show-overflow-tooltip="true" width="120"></el-table-column>
                  <el-table-column label="昨日最大压力(MPa)" align="center" prop="maxPresO" :show-overflow-tooltip="true" width="140"></el-table-column>
                  <el-table-column label="环比(最大压力)(%)" align="center" prop="maxPressSequential" :show-overflow-tooltip="true" width="140"></el-table-column>
                </el-table-column>
                <el-table-column label="生成日期" align="center" prop="getTimeN" :show-overflow-tooltip="true" width="160">
                </el-table-column>
              </el-table>
              <pagination
                :total="dayTableTotal"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getDayReportList"
              />
            </div>
          </transition>
          <transition
            enter-active-class="animated fadeInUp tableIn"
            leave-active-class="animated fadeOutUp tableOut">
            <div v-show="tableName === 'monthTable'">
              <el-table v-loading="tableLoading2" border :data="data_two"  highlight-current-row :height="getAvailableHeight" ref="monthTable">
                <el-table-column label="设备名称" align="center" prop="terminalName" :show-overflow-tooltip="true"/>
                <el-table-column label="用户编号" align="center" prop="userId" :show-overflow-tooltip="true" />
                <el-table-column label="出厂编号" align="center" prop="firstSupplierId" :show-overflow-tooltip="true"/>
                <el-table-column label="通讯地址" align="center" prop="communicateAddress" :show-overflow-tooltip="true"/>
                <el-table-column label="正向月用量(m³)" align="center" prop="readDosageN" :show-overflow-tooltip="true" width="140"/>
                <el-table-column label="反向月用量(m³)" align="center" prop="reverseDosageN" :show-overflow-tooltip="true" width="140"/>
                <el-table-column label="总月用量(m³)" align="center" prop="dosageN" :show-overflow-tooltip="true" width="130"/>
                <el-table-column label="上期总月用量(m³)" align="center" prop="dosageO" :show-overflow-tooltip="true" width="140"/>
                <el-table-column label="总月用量增长比(%)" align="center" prop="dosageGrowthRate" :show-overflow-tooltip="true" width="140"></el-table-column>
<!--                <el-table-column label="户名" align="center" prop="nName" :show-overflow-tooltip="true"></el-table-column>-->
                <el-table-column label="IMEI" align="center" prop="imei" :show-overflow-tooltip="true"></el-table-column>
              </el-table>
              <pagination
                :total="monthTableTotal"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getMonthReportList"
              />
            </div>
          </transition>
          <transition
            enter-active-class="animated fadeInUp tableIn"
            leave-active-class="animated fadeOutUp tableOut">
            <div v-show="tableName === 'yearTable'">
              <el-table v-loading="tableLoading3" border :data="data_three"  highlight-current-row :height="getAvailableHeight" ref="yearTable">
                <el-table-column label="设备名称" align="center" prop="terminalName" :show-overflow-tooltip="true"/>
                <el-table-column label="用户编号" align="center" prop="userId" :show-overflow-tooltip="true" />
                <el-table-column label="出厂编号" align="center" prop="firstSupplierId" :show-overflow-tooltip="true"/>
                <el-table-column label="通讯地址" align="center" prop="communicateAddress" :show-overflow-tooltip="true"/>
                <el-table-column label="正向年用量(m³)" align="center" prop="readDosageN" :show-overflow-tooltip="true"/>
                <el-table-column label="反向年用量(m³)" align="center" prop="reverseDosageN" :show-overflow-tooltip="true" />
                <el-table-column label="总年用量(m³)" align="center" prop="dosageN" :show-overflow-tooltip="true"/>
                <el-table-column label="上期总年用量(m³)" align="center" prop="dosageO" :show-overflow-tooltip="true"/>
                <el-table-column label="总年用量增长比(%)" align="center" prop="dosageGrowthRate" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    {{ scope.row.dosageGrowthRate !==null ? scope.row.dosageGrowthRate.toFixed(2) : ''}}
                  </template>
                </el-table-column>
<!--                <el-table-column label="户名" align="center" prop="nName" :show-overflow-tooltip="true"></el-table-column>-->
                <el-table-column label="IMEI" align="center" prop="imei" :show-overflow-tooltip="true"></el-table-column>
              </el-table>
              <pagination
                :total="yearTableTotal"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getYearReportList"
              />
            </div>
          </transition>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
import {listTerminalsDbTree} from "@/api/record/terminalsdb";
import { widwidth, widheight } from '@/utils/getClient.js'
import { getReportByDay, getReportByMonth, getReportByYear } from '@/api/datastatistics/terminals/dosageStatics.js'
export default {
  name: "ComplexReport",
  data() {
    return {
      collapseAble: false,
      // 表格数据总数
      dayTableTotal: 0,
      monthTableTotal: 0,
      yearTableTotal: 0,
      // 表格加载状态
      tableLoading1: false,
      tableLoading2: false,
      tableLoading3: false,
      tableName: 'dayTable',
      // 区域树选项
      sheetsTreeList: [],
      defaultExpandedKeys: [],
      screenHeight: null,
      size: 'mini',
      // collapseAble: false,
      fold: false,
      maxShow: 4,
      labelWidth: '70px',
      defaultProps: {
        children: "children",
        label: "sheetsName",
      },
      // 遮罩层
      treeLoading: true,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        getTimeN: moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'),
        freezeTime: null,
        communicateAddress: null,
        firstSupplierId: null,
        imei: null,
        terminalName: null,
        sheetsCode: null,
      },
      filterText: '',
      widwidth: widwidth,
      widheight: widheight,
      data_one: [],
      data_two: [],
      data_three: [],
      data_four: [],
      moment,
      form: {},
      visible: false,
    }
  },
  created() {
    this.screenHeight = document.body.clientHeight
    this.getTreeList();
  },
  computed: {
    loginUserId() {
      return this.$store.state.user.userId
    },
    systemFlag() {
      return this.$store.state.user.systemFlag
    },
    getAvailableHeight() {
      return this.screenHeight - (this.fold ? 252 : 224)
    },
  },
  mounted() {
    this.getDayReportList()
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowControl()
    }
  },
  watch: {
    // 根据名称筛选区域树
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 导出数据
    handleExport() {
      if(this.tableName === 'dayTable') {
        this.exportDayData()
      }else if(this.tableName === 'monthTable') {
        this.exportMonthData()
      }else if(this.tableName === 'yearTable') {
        this.exportYearData()
      }
    },
    // 导出日报表数据
    exportDayData(){
      this.download('datastatistics/terminalsdayfreezedb/exportReportByDay', {
        ...this.queryParams
      }, `大用户表_日报表_${new Date().getTime()}.xlsx`)
    },
    // 导出月报表数据
    exportMonthData(){
      this.download('datastatistics/terminalsmonfreezedb/exportReportByMonth', {
        ...this.queryParams
      }, `大用户表_月报表_${new Date().getTime()}.xlsx`)
    },
    // 导出年报表数据
    exportYearData(){
      this.download('datastatistics/terminalsmonfreezedb/exportReportByYear', {
        ...this.queryParams
      }, `大用户表_年报表_${new Date().getTime()}.xlsx`)
    },
    // 获取日报表数据
    getDayReportList() {
      this.tableLoading1 = true
      getReportByDay(this.queryParams).then((response) => {
        if(response.code === 200) {
          let result = []
          let data = response.rows
          this.dayTableTotal = response.total
          data.map((item, index) => {
            let _temp = {
              key: index,
              Id: item.Id,
              terminalName: item.terminalName, // 设备名称
              firstSupplierId: item.firstSupplierId, // 出厂编号
              userId: item.userId, // 用户编号
              imei: item.imei, // imei
              communicateAddress: item.communicateAddress, // 通讯地址
              minNightFlow: item.minNightFlow < 0?0:item.minNightFlow, // 最小夜间流量
              minNightFlowO: item.minNightFlowO < 0?0:item.minNightFlowO, //昨日最小夜间流量
              averageFlow: item.averageFlow,//平均值
              readDosageN: item.readDosageN, // 正向用量
              reverseDosageN: item.reverseDosageN, // 反向用量
              dosageN: item.dosageN, // 净用量
              totalFlowO: item.totalFlowO, //起始读数
              totalFlowN: item.totalFlowN, //结束读数
              readDosageO: item.readDosageO, // 昨日正向用量
              reverseDosageO: item.reverseDosageO, // 昨日反向用量
              dosageO: item.dosageO, // 昨日净用量
              minPressN: item.minPressN, // 最小压力
              minPressO: item.minPressO, // 昨日最小压力
              minPressSequential: item.minPressSequential===null ? '' : (item.minPressSequential === '' ? '' : `${item.minPressSequential}%`), //  环比
              maxPressN: item.maxPressN, // 最大压力
              maxPresO: item.maxPresO, // 昨日最大压力
              maxPressSequential: item.maxPressSequential===null ? '': (item.maxPressSequential === '' ? '' : `${item.maxPressSequential}%`), //    最大环比
              getTimeN: item.getTimeN, // 生成日期
            }
            result.push(_temp)
          })
          this.data_one = result
          this.tableLoading1 = false
        }else{
          this.data_one = []
          this.dayTableTotal = 0
          this.tableLoading1 = false
          return false
        }
      })
    },
    // 获取月报表数据
    getMonthReportList() {
      this.tableLoading2 = true
      getReportByMonth(this.queryParams).then((response) => {
        if(response.code === 200) {
          this.data_two = response.rows
          this.monthTableTotal = response.total
          this.tableLoading2 = false
        }else{
          this.data_two = []
          this.monthTableTotal = 0
          this.tableLoading2 = false
        }
      })
    },
    // 获取年报表数据
    getYearReportList() {
      this.tableLoading3 = true
      getReportByYear(this.queryParams).then((response) => {
        if(response.code === 200) {
          this.data_three = response.rows
          this.yearTableTotal = response.total
          this.tableLoading3 = false
        }else {
          this.data_three = []
          this.yearTableTotal = 0
          this.tableLoading3 = false
        }

      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      if(this.tableName === 'dayTable'){
        this.getDayReportList()
      }else if(this.tableName === 'monthTable'){
        this.getMonthReportList()
      }else if(this.tableName === 'yearTable'){
        this.getYearReportList()
      }
    },
    // 切换报表类型
    changeSelect(name) {
      this.tableName = name
      switch (name) {
        case "dayTable":
          this.queryParams.getTimeN = moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD')
          this.getDayReportList()
          break;
        case "monthTable":
          this.queryParams.getTimeN = null
          this.queryParams.freezeTime = moment(new Date()).subtract(1, 'months').format('YYYY-MM')
          this.getMonthReportList()
          break;
        case "yearTable":
          this.queryParams.getTimeN = null
          this.queryParams.freezeTime = moment(new Date()).format('YYYY')
          this.getYearReportList()
          break;
        default:
          break;
      }
    },
    // 重置表单
    resetQuery() {
      this.$refs.tree.setCurrentKey(null);
      this.tableName = 'dayTable'
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        freezeTime: null,
        communicateAddress: null,
        firstSupplierId: null,
        imei: null,
        terminalName: null,
        sheetsCode: null,
        getTimeN: moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'),
      }
      this.handleQuery()
    },
    // 展开折叠按钮
    shiftCollapseAble() {
      this.fold = !this.fold
      this.minShowControl()
    },
    // 通过maxShow控制元素显示/折叠
    minShowControl() {
      const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
      const len = group?.length ? group?.length - 1 : 0
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold
          }
        })
        this.collapseAble = true
      } else {
        this.collapseAble = false
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.sheetsName.indexOf(value) !== -1;
    },

    /** 查询区域下拉树结构 */
    getTreeList() {
      this.treeLoading = true;
      this.sheetsTreeList = JSON.parse(localStorage.getItem('terminalTreeData'))
      if(this.sheetsTreeList.length === 0) {
        this.treeLoading = false;
      }else {
        this.defaultExpandedKeys = [this.sheetsTreeList[0].sheetsCode]
        this.treeLoading = false;
      }
    },

    // 页面提示信息
    tip() {
      this.$modal.msgWarning("请选择设备查看数据!")
    },
    handleNodeClick(data){
      this.queryParams.sheetsCode = data.sheetsCode
      this.handleQuery()
    },
  }
};
</script>
<style lang="scss" scoped>
//.form_col {
//  width: 80%;
//
//  ::v-deep .el-form {
//    width: 100%;
//  }
//
//  ::v-deep .el-form-item {
//    width: 25%;
//  }
//}
//
//.form_query {
//  width: 20%;
//  text-align: right;
//}
// 设置本身箭头为隐藏状态
::v-deep .el-tree-node__expand-icon {
  width: 20px;
  padding: 0;
  margin: 5px 0;

  svg {
    display: none;
    width: 0;
  }
}

// 虚线所需样式
::v-deep .treeCont {
  .el-tree-node{
    width: fit-content;
  }
  .el-tree > .el-tree-node:before {
    //border-top: none;
    padding-left: 0px;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node__content {
    padding-left: 5px !important;
  }

  .el-tree-node__children {
    //overflow: visible !important;
    .el-tree-node {
      position: relative;
      padding-left: 5px;
    }
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    width: 4px;
  }

  .el-tree-node__children {
    padding-left: 18px;
  }

  .el-tree-node :last-child:before {
    height: 17px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
    top: 25px;
    width: 0px;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #c0c4cc;
    height: 100%;
    top: -3px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #c0c4cc;
    height: 0px;
    top: 13px;
    width: 16px;
  }
}
// 默认三角行换成加减号
::v-deep .treeCont {
  .el-tree-node__content > .el-tree-node__expand-icon {
    width: 16px;
    //width: 0px;
    padding: 0px;
    font-size: 16px !important;
    margin-right: 5px; //新增
  }

  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  //有子节点 且未展开
  .el-tree .el-tree-node__expand-icon:before {
    background: url('../../../assets/images/jia.png') no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  .custom-tree-node .el-icon svg {
    display: block !important;
    color: #000;
  }

  //有子节点 且已展开
  .el-tree .el-tree-node__expand-icon.expanded:before {
    background: url('../../../assets/images/jian.png') no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  //没有子节点
  .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: none;
    content: "";
    display: block;
    width: 20px;
    height: 20px ;
    font-size: 20px;
    background-size: 100% 100%;
  }
}
//按钮选中状态样式
.showFocus {
  background-color: #039cde;
  border-color: #039cde;
}
::v-deep .el-table__fixed {
  height: auto !important; // 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式
  bottom: 6px; // 固定列默认设置了定位，
}
</style>

